<template>
  <div class="edit-wrap">
	  <Header></Header>
	  <div class="main-wrap">
		  <EditModelForLeft></EditModelForLeft>
		  <div class="main-wrap-content">
			  <div class="main-wrap-scene"></div>
			 <!-- <EditModelForBottom></EditModelForBottom> -->
		  </div>
		  <EditModelForRight></EditModelForRight> 
	  </div>
	  <div class="footer-wrap"></div>
  </div>
</template>


<script setup lang="ts">
	import Header from "./components/header/header.vue"
	import EditModelForRight from "./components/right/EditModelForRight.vue"
	import EditModelForBottom from "./components/bottom/EditModelForBottom.vue"
	import EditModelForLeft from "./components/left/EditModelForLeft.vue"
	
	
</script>

<style scoped>
	.edit-wrap{
		width: 100%;
		height: 100%;
		color: #fff;
		position: relative;
		z-index: 1002;
		background-color: transparent;
		overflow: hidden;
		>.main-wrap{
			width: 100%;
			background-color: #2d323e;
			position: relative;
			height: calc(100% - 64px);
			
			display: -webkit-flex;
			display: flex;
            -webkit-flex-direction: row;
            flex-direction: row;
			>.main-wrap-left{
				width: 13.75rem;
				background-color: rebeccapurple;	
			}
			>.main-wrap-content{
				flex: 1;
				background-color: transparent;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
				>.main-wrap-scene{
					flex: 1;
					point-events:none
				}
			}
		}
		>.footer-wrap{
			width: 100%;
			height: 19px;
			border-top: 1px solid #181e27;
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0;
			color: #9f9f9f;
			background: #282e39;
			font-size: 12px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			z-index: 1;
		}
	}
</style>